<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        #daoshi{
            background-image: url(img/bg8.png);
            position: relative;
            background-size: 100% 100%;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            /*display: none;*/
        }
        #jingji{
            position: absolute;
            top: 57%;
            left: 15%;
            width: 76%;
        }
        #taicha{
            position: absolute;
            top: 65%;
            left: 15%;
            width: 76%;
        }

        #sp1{
            position: absolute;
            top: 20%;
            left: 20%;
            width: 67%;
            color: red;
            display: inline-block;
            font-size: 24px;
            text-align: center;
        }
        #p2{
            font-size: 30px;
            width: 100%;
            color: gold;
            padding-top: 11px;
        }
        #p3{
            position: absolute;
            top: 33%;
            left: 23%;
            color: black;
            font-size: 19px;
        }
        #sp4{
            position: absolute;
            top: 38%;
            left: 26%;
            width: 48%;
            display: inline-block;
            text-align: center;
            font-size: 20px;
            line-height: 24px;
        }
        #shuliang3{
            color:red;
        }
        #baifenbi3{
            color: red;
        }
        #baixie{
            background-image: url(img/bg9.png);
            position: relative;
            background-size: 100% 100%;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            display: none;
        }
        #haoyou2{
            position: absolute;
            top: 30%;
            left: 33%;
            color:red;
            font-size: 30px;
        }
        #woyeyaotiaozhan{
            position: absolute;
            top: 75%;
            left: 6%;
            width: 84%;
        }

    </style>
</head>
<body>
<script src="js/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/touch.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/loading.js" type="text/javascript" charset="utf-8"></script>

<div id="daoshi">
    <span id="sp1">
        你的好友
        <span id="haoyouming1">xxx</span>
        <p id="p2">邀请您做TA的导师</p>
    </span>

    <span id="p3">TA在《30秒赛车挑战》中</span>

    <span id="sp4">
        闯过了
        <span id="shuliang3">50个</span>
        障碍物胜出全国
        <span id="baifenbi3">100%</span>
        玩家
    </span>
    <img src="img/jinjibutton.png" alt="###" id="jingji">
    <img src="img/taichabutton.png" alt="###" id="taicha">
</div>

<div id="baixie">
    <span id="haoyou2">
        <span id="haoyouming">XX</span>
        拜谢你
    </span>
    <a href="index.php">
        <img src="img/woyeyaobutton.png" alt="###" id="woyeyaotiaozhan">
    </a>
</div>

<script>
    touch.on("#jingji","touchstart",function () {
        $("#baixie").show();
        $("#daoshi").hide();
    })



</script>
</body>
</html>